<template>
    <el-container style="background-color:#f0f3f4">
        <el-header style="60px;background-color:#ffff"  v-show="isShowBtn==1">
            <tool-bar v-bind:protoNodes="toNodes"></tool-bar>
        </el-header>
        <el-main justify="center" align="middle" >
            <!--主要区域容器-->
            <el-form v-if="node.FormType===0 || node.FormType===10" id="FrmFool">
                    傻瓜表单
            </el-form>  
             <el-form v-else-if="node.FormType===1" id="FrmFree"> 
                    自由表单
            </el-form>  
             <el-form v-else-if="node.FormType===5" > 
                    树形表单
            </el-form>  
             <el-form v-else="node.FormType===12" id="FrmDevelop"  v-html="developHtml" :style="{width:widthStyle}" style="background-color:#ffff;margin:0px auto;padding:5px 10px"> 
                    开发者表单
                    {{developHtml}}
            </el-form>
            <div id="divinfo" v-show="isShowDiv">
            </div>
            <!--pop弹出框-->
            <el-dialog
                :title="Poptitle"
                :visible.sync="popVisible"
                :width="popWidth"
                height="80%"
                :before-close="handleClose">
                <popbranchesandleaf ref="popbranchesandleaf" v-if="PopOperation == 'PopBranchesAndLeaf'" v-bind:proParams="popParams"></popbranchesandleaf>
            </el-dialog>

        </el-main>
       
    </el-container>
    
    
</template>
<style src="../datetimepicker/css/bootstrap-datetimepicker.css"></style>
<style src="../datetimepicker/css/bootstrap.css"></style>
<script>
import ToolBar from "./components/tool-bar.vue";
import {ParseDevelopFrm} from '@/api/FrmDevelop.js';
import {LoadFrmDataAndChangeEleStyle,AfterBindEn_DealMapExt} from '@/api/FrmEnd.js';
import popbranchesandleaf from "./ccform/Pop/PopBranchesAndLeaf.vue";
import {ClosePopFunc} from '@/api/js/Pop.js';


export default {

    data(){
        return{
            width:'900px',
            node:null, //节点信息
            mainData:null,//表单数据
            developHtml:'',
            flowData:null,//表单的所有数据
            toNodes:[],
            isShowDiv:false,
            Poptitle:'',
            popVisible:false,
            popWidth:'50%',
            PopOperation:'',
            popParams:[],
            isShowBtn:1,
            form: {
            },
            params:{}
        }
    },
    components: {
        ToolBar,
        popbranchesandleaf,
       
	},
    computed:{
        widthStyle: function() {
            return this.flowData.Sys_MapData[0].FrmW + 'px';
        }
    },
    methods:{
       handleClose:function(done){
          //获取子组件中数据
           var selectRows = this.$refs.popbranchesandleaf.getvalue();
          //var selectRows=[];
            selectRows.push({"No":"zhanghaicheng",Name:"张海成"});
          if(selectRows.length!=0){
              //执行相关的操作
              ClosePopFunc(this.popParams,selectRows);
          }
          done();
       },
      
    },
    created(){
        // 获取myflow.vue 组件数据
        // console.log("--获取数据--",this.$route.params)
        // this.params = this.$route.params;
        //获取表单数据
        this.$tools.GenerWorkNode(this);
        //方向跳转规则如果是按钮旁的下拉框
        this.toNodes = this.flowData.ToNodes;
        this.mainData = this.flowData.MainTable[0];
         //初始化按钮
        this.params = this.$store.getters.getData;
        this.isShowBtn = this.params.IsShowBtn;
       
    },
    mounted(){
        //开发者表单，加载完页面元素后解析页面
        if(this.node.FormType === 12){
            ParseDevelopFrm(this.$route.params,this.flowData);
        }
        LoadFrmDataAndChangeEleStyle(this.flowData,this.$route.params);

        if (this.node.FormType == 11) {
            //获得配置信息.
            var frmNode = this.flowData["FrmNode"];
            if (frmNode) {
                frmNode = frmNode[0];
                if (frmNode.FrmSln == 1) {
                    /*只读的方案.*/
                    //alert("把表单设置为只读.");
                    this.$tools.SetFrmReadonly();
                    //alert('ssssssssssss');
                }

                if (frmNode.FrmSln != 1)
                    //处理下拉框级联等扩展信息
                    AfterBindEn_DealMapExt(this.flowData,this);
            }
        } else {
            //处理下拉框级联等扩展信息
            AfterBindEn_DealMapExt(this.flowData,this);
        }

         this.$tools.HelpOper(this.node.HelpRole,this.params.FK_Node,this);
        
    }
}

</script>
<style scoped>

/*
	找到html标签、body标签，和挂载的标签
	都给他们统一设置样式
*/
  html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }
 
    .el-header {
        width: 100%;
        height: 56px !important;
        line-height: 56px;
        padding: 0 20px 0 44px;
        background: #ffffff;
        box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
        box-sizing: border-box;
        /**position: fixed;*/
        /**z-index: 0;*/
        top: 0;
    }
    
</style>

